<template>
  <div class="main">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label" class="labelcolor">付款</span>
        <el-row>
          <el-radio v-model="radio" label="1">上传付款凭证</el-radio>
          <el-radio v-model="radio" label="2">不传付款凭证</el-radio>
        </el-row>
        <el-form
          style="margin-top: 30px; margin-left: 10px"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="收款单位" prop="unit">
            <span>杭州联晶网络科技有限公司</span>
          </el-form-item>
          <el-form-item label="开户银行" prop="obank">
            <span>中国建设银行杭州文晖支行</span>
          </el-form-item>
          <el-form-item label="银行账号" prop="bankaccount">
            <span>56454456456456456</span>
          </el-form-item>

          <el-form-item label="付款账号" prop="account">
            <el-input
              v-model="ruleForm.account"
              placeholder="请填入付款账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款凭证" prop="voucher" style="height: 150px">
            <!-- <el-input v-model="ruleForm.voucher"  placeholder="请上传付款凭证"></el-input> -->
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item label="备注" prop="desc">
            <el-input
              type="textarea"
              v-model="ruleForm.desc"
              placeholder="请输入备注"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >确认提交</el-button
            >
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "1",
      activeIndex: "1",
      value1: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      ruleForm: {
        unit: "杭州联晶网络科技有限公司",
        account: "",
        obank: "中国建设银行杭州文晖支行",
        bankaccount: "56454456456456456",
        delivery: false,
        type: [],
        voucher: "",
        desc: "",
      },
      rules: {
        account: [
          { required: true, message: "请输入付款账号", trigger: "blur" },
        ],
        voucher: [
          { required: true, message: "请上传付款凭证", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style src="../style/mine.css">
</style>